// 与gulpfile类似的工具还有很多  fis grunt  webpack等
// 三阶段的时候我们主要使用的是webpack  
// gulp是一个node的第三方模块 
var { watch, task, series, parallel, src, dest } = require("gulp");
var htmlmin = require("gulp-htmlmin");
var autoPreFixer = require("gulp-autoprefixer");
var sass = require('gulp-sass')(require('sass'));
var cssmin = require("gulp-cssmin");
var uglify = require("gulp-uglify");
var babel = require("gulp-babel");
var imagemin = require("gulp-imagemin");
var clean = require("gulp-clean");
var server = require("gulp-webserver");

// gulp是一个基于流的任务流程工作方式
// 处理html
function doHTML() {
    return src('./src/**/*.html')
        .pipe(htmlmin({
            // 是否压缩空白
            "collapseWhitespace": true,
            // 是否压缩style标签及其中的css代码
            "minifyCSS": true,
            // 是否压缩script标签及其中的js代码
            "minifyJS": true,
            // 是否移除没有属性值的HTML标准属性
            "removeEmptyAttributes": true,
            // 忽略自定义注释
            "ignoreCustomComment": true,
            // 移除注释
            // "removeComments": true
        }))
        .pipe(dest("./dist/"))
}

// 处理scss
function doScss() {
    return src("./src/**/*.scss")
        .pipe(sass()) // 将scss转为css
        .pipe(autoPreFixer()) // 添加前缀
        .pipe(cssmin()) // 压缩css
        .pipe(dest("./dist/"))
}

// 处理JS
function doJS() {
    return src("./src/js/*.js")
        .pipe(babel({ //ES6转ES5  只有语法能变  API不可转
            presets: ["env"]
        }))
        .pipe(uglify())
        .pipe(dest("./dist/js"))
}

// 定义任务处理图片
function doImage() {
    return src("./src/imgs/*.*")
        .pipe(imagemin())
        .pipe(dest('./dist/imgs'))
}

// 注册删除文件任务
function doClean() {
    return src("./dist")
        .pipe(clean())
}
var doALL = series(doClean, parallel([doHTML, doScss, doJS, doImage, doLibs]));

// 搬运libs目录
function doLibs() {
    return src("./src/libs/**/*.*")
        .pipe(dest("./dist/libs"))
}
// 定义任务 启动服务器
function doServer() {
    return src("./dist")
        .pipe(server({
            // 主机名
            host: "localhost",
            // 端口号
            port: 3000,
            // 热更新 
            livereload: true,
            // 打开的主页
            open: "./index.html",
            // 当请求失败时的替代响应
            fallback: "./index.html",
            // 配置代理
            // proxy
            proxies: [
                {
                    // 本服务器接收到的请求
                    source: "/php/",
                    // 转发到的服务器地址
                    target: "http://localhost:80/php/",
                }
            ]
        }))
}

// 定义注视任务
function doWatch() {
    return watch("./src", doALL)
}

// 暴露 注册任务
module.exports.doHTML = doHTML;
module.exports.doScss = doScss;
module.exports.doJS = doJS;
module.exports.doImage = doImage;
module.exports.doClean = doClean;
module.exports.doALL = doALL;
module.exports.doWatch = doWatch;
module.exports.doServer = doServer;

// 运行gulpfile.js文件的时候 不再使用 node gulpfile.js 这种方式
// 而是要使用 gulp 命令 